"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"

import { Button } from "~/registry/default/ui/button"
import {
   Form,
   FormControl,
   FormDescription,
   FormField,
   FormItem,
   FormLabel,
} from "~/registry/default/ui/form"
import { Switch } from "~/registry/default/ui/switch"
import { toast } from "~/registry/default/ui/use-toast"

const FormSchema = z.object({
   marketing_emails: z.boolean().default(false).optional(),
   security_emails: z.boolean(),
})

export default function SwitchForm() {
   const form = useForm<z.infer<typeof FormSchema>>({
      resolver: zodResolver(FormSchema),
      defaultValues: {
         security_emails: true,
      },
   })

   function onSubmit(data: z.infer<typeof FormSchema>) {
      toast({
         title: "You submitted the following values:",
         description: (
            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
               <code className="text-white">
                  {JSON.stringify(data, null, 2)}
               </code>
            </pre>
         ),
      })
   }

   return (
      <Form {...form}>
         <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="w-full space-y-6"
         >
            <div>
               <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
               <div className="space-y-4">
                  <FormField
                     control={form.control}
                     name="marketing_emails"
                     render={({ field }) => (
                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                           <div className="space-y-0.5">
                              <FormLabel className="text-base">
                                 Marketing emails
                              </FormLabel>
                              <FormDescription>
                                 Receive emails about new products, features,
                                 and more.
                              </FormDescription>
                           </div>
                           <FormControl>
                              <Switch
                                 checked={field.value}
                                 onCheckedChange={field.onChange}
                              />
                           </FormControl>
                        </FormItem>
                     )}
                  />
                  <FormField
                     control={form.control}
                     name="security_emails"
                     render={({ field }) => (
                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                           <div className="space-y-0.5">
                              <FormLabel className="text-base">
                                 Security emails
                              </FormLabel>
                              <FormDescription>
                                 Receive emails about your account security.
                              </FormDescription>
                           </div>
                           <FormControl>
                              <Switch
                                 checked={field.value}
                                 onCheckedChange={field.onChange}
                                 disabled
                                 aria-readonly
                              />
                           </FormControl>
                        </FormItem>
                     )}
                  />
               </div>
            </div>
            <Button type="submit">Submit</Button>
         </form>
      </Form>
   )
}
